<template>
  <div>
    <Card>
      <Modal v-model="addModel" title="新建缴费类型" @on-ok="submit">
        <div class="bill-addition">
          <Form :model="typeData" :label-width="80" class="bill-info">
            <Row>
              <Col span="24">
                <FormItem label="类型名" class="bill-info__item">
                  <Input
                    v-model="typeData.name"
                    :autosize="{ minRows: 2, maxRows: 5 }"
                    placeholder="请输入类型名..."
                  ></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
        <div slot="footer">
          <Button @click="submit" type="primary">添加</Button>
          <Button @click="addModel = false">取消</Button>
        </div>
      </Modal>

      <Modal v-model="editModel" title="修改缴费类型" @on-ok="submit">
        <div class="bill-addition">
          <Form :model="editTypeData" :label-width="80" class="bill-info">
            <Row>
              <Col span="24">
                <FormItem label="类型名" class="bill-info__item">
                  <Input
                    v-model="editTypeData.name"
                    :autosize="{ minRows: 2, maxRows: 5 }"
                    placeholder="请输入类型名..."
                  ></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
        <div slot="footer">
          <Button @click="submitEdit" type="primary">修改</Button>
          <Button @click="editModel = false">取消</Button>
        </div>
      </Modal>
      <vxe-grid
        highlight-hover-row
        show-header-overflow
        show-overflow
        ref="xGrid"
        height="600"
        align="center"
        :data="curPageList"
        :columns="tableColumn"
        :toolbar-config="tableToolbar"
        :edit-config="{
          trigger: 'manual',
          mode: 'row',
          showStatus: true,
          icon: 'fa fa-file-text-o'
        }"
        emptyText="未查询到缴费类型"
      >
        <template #toolbar_buttons>
          <Button
            type="primary"
            style="margin-right: 10px"
            icon="md-refresh"
            @click="refreshTable()"
            >刷新
          </Button>
          <Button type="primary" style="margin-right: 10px" @click="addType()"
            >创建缴费类型
          </Button>
          <Button type="error" style="margin-right: 10px" @click="deleteList()"
            >批量删除
          </Button>
        </template>

        <template #operate="{ row }">
          <Button
            type="primary"
            style="margin-right: 10px"
            @click="editRow(row)"
            >编辑
          </Button>
          <Button
            type="error"
            style="margin-right: 10px"
            @click="deleteRow(row)"
            >删除
          </Button>
        </template>
        <template #pager>
          <div style="text-align: center; padding: 10px">
            <Page
              :current="page.current"
              :total="page.total"
              :page-size="page.pageSize"
              show-elevator
              show-total
              show-sizer
              @on-change="refresh"
            />
          </div>
        </template>
      </vxe-grid>
    </Card>
  </div>
</template>

<script>
import { start } from 'countup'
export default {
  data () {
    return {
      typeData: {},
      editTypeData: {},
      editModel: false,
      typeList: [],
      curPageList: [],
      addModel: false,

      tableToolbar: {
        zoom: true,
        custom: true,
        slots: {
          buttons: 'toolbar_buttons',
          tools: 'toolbar_tools'
        }
      },
      tableColumn: [
        { type: 'checkbox', width: 40, fixed: 'left' },
        // { field: "id", title: "缴费类型id", width: 250 },
        { field: 'name', title: '缴费类型名称' },
        { field: 'createTime', title: '创建时间' },
        { field: 'updateTime', title: '修改时间' },

        {
          title: '操作',
          showOverflow: true,
          slots: { default: 'operate' },
          fixed: 'right'
        }
      ],
      page: {
        current: 1,
        total: 0,
        pageSize: 10
      },
      billList: []
    }
  },
  mounted () {
    this.parkId = 1
    this.getTypeList()
  },
  methods: {
    submit () {
      console.log('submitData', this.billData)
      if (this.typeData.name == null) {
        this.$Message.error('缴费类型名不能为空')
        return
      }
      this.submitType()
      this.addModel = false
    },
    refresh (curPage) {
      this.page.current = curPage
      this.getCurPage()
    },
    submitEdit () {
      if (this.editTypeData.name == '') {
        this.$Message.error('缴费类型名不能为空')
        return
      }

      const updateDate = {
        newTypeName: this.editTypeData.name,
        parkId: this.parkId,
        typeId: this.editTypeData.id
      }
      this.$Axios
        .request({
          method: 'post',
          url: '/bill/bill-type/update',
          data: updateDate
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$Message.success('修改成功')
            this.getTypeList()
          } else {
            this.$Message.error(response.data.msg)
          }
        })
      this.editTypeData = {}
      this.editModel = false
    },
    formatDateTime (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var min = date.getMinutes()
      min = min < 10 ? '0' + min : min
      var s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + m + '-' + d + '  ' + h + ':' + min + ':' + s
    },
    reset () {},
    getTypeList () {
      const queryData = {
        parkId: this.parkId
      }
      this.$Axios
        .request({
          method: 'get',
          url: '/bill/bill-type/get',
          params: queryData
        })
        .then(response => {
          if (response.data.code == 200) {
            this.typeList = response.data.msg.billTypes
            this.typeList.forEach(type => {
              const createTime = new Date(type.createTime)
              const updateTime = new Date(type.updateTime)
              type.createTime = this.formatDateTime(createTime)
              type.updateTime = this.formatDateTime(updateTime)
              this.page.total = this.typeList.length
              this.getCurPage()
            })
          } else {
            this.$Message.error(response.data.msg)
          }
        })
    },
    getCurPage () {
      const start = (this.page.current - 1) * this.page.pageSize
      const end =
        start + this.page.pageSize > this.page.total
          ? this.page.total
          : start + this.page.pageSize
      this.curPageList = this.typeList.slice(start, end)
    },

    submitType () {
      const addData = {
        name: this.typeData.name,
        parkId: this.parkId
      }
      this.$Axios
        .request({
          method: 'post',
          url: '/bill/bill-type/add',
          data: addData
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$Message.success('创建成功')
            this.getTypeList()
          } else {
            this.$Message.error(response.data.msg)
          }
        })
      this.typeData = {}
    },

    addType () {
      this.addModel = true
    },

    refreshTable () {
      this.getTypeList()
      this.$Message.success('刷新成功')
    },
    deleteList () {
      // 获取选中的数据
      const selectedRecords = this.$refs.xGrid.getCheckboxRecords()
      const billNumbserList = []
      let comfirmString = ''
      for (const i in selectedRecords) {
        billNumbserList.push(selectedRecords[i].id)
        comfirmString += "\n '" + selectedRecords[i].name + "'"
      }
      this.$Modal.confirm({
        title: '操作确认',
        content: '您确定要删除缴费类型' + comfirmString + '吗',
        onOk: () => {
          for (const i in billNumbserList) {
            this.deleteBill(billNumbserList[i])
          }
          //   this.deleteBill( row.billNumber)
        },
        onCancel: () => {}
      })
    },

    editRow (row) {
      const _row = JSON.stringify(row)
      this.editTypeData = JSON.parse(_row)
      this.editModel = true
    },
    deleteRow (row) {
      this.$Modal.confirm({
        title: '操作确认',
        content: '您确定要删除账单"' + row.name + '"吗',
        onOk: () => {
          this.deleteBill(row.id)
        },
        onCancel: () => {}
      })
    },
    deleteBill (id) {
      const deleteData = {
        parkId: this.parkId,
        typeId: id
      }
      this.$Axios
        .request({
          method: 'get',
          url: '/bill/bill-type/delete',
          params: deleteData
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$Message.success('删除成功')
            this.getTypeList()
          } else {
            this.$Message.error(response.data.msg)
          }
        })
    }
  }
}
</script>
<style scoped>
.bill-addition {
  display: flex;
  flex-direction: column;
  align-content: center;
  padding: 20px 30px;
  background-color: #fff;
}
.title {
  margin: 10px 0px 20px 0px;
  font-size: large;
  font-weight: bold;
}
.billContents {
  width: 100%;
}
.option {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10px;
  width: 50%;
}
.billContents-options {
  margin-top: 30px;
}
</style>
